<template>
  <section class="service-cases py-5">
    <div class="container">
      <div class="row">
        <div class="col-12">
          <div class="section-header text-center mb-5">
            <p class="about_line"></p>
            <h2 class="about_h2">救助案例</h2>
            <p class="about_p">service case</p>
          </div>
          
          <!-- 分类导航 -->
          <div class="center_nav mb-4">
            <ul class="center_nav_ul nav nav-pills justify-content-center">
              <li class="nav-item">
                <button 
                  class="nav-link"
                  :class="{ active: activeCategory === 'all' }"
                  @click="setActiveCategory('all')"
                >
                  全部
                </button>
              </li>
              <li class="nav-item">
                <button 
                  class="nav-link"
                  :class="{ active: activeCategory === 'dogs' }"
                  @click="setActiveCategory('dogs')"
                >
                  犬类
                </button>
              </li>
              <li class="nav-item">
                <button 
                  class="nav-link"
                  :class="{ active: activeCategory === 'cats' }"
                  @click="setActiveCategory('cats')"
                >
                  猫类
                </button>
              </li>
              <li class="nav-item">
                <button 
                  class="nav-link"
                  :class="{ active: activeCategory === 'others' }"
                  @click="setActiveCategory('others')"
                >
                  其他
                </button>
              </li>
            </ul>
          </div>
          
          <!-- 救助案例列表 -->
          <div class="row">
            <div 
              v-for="serviceCase in filteredCases" 
              :key="serviceCase.id"
              class="col-sm-6 col-lg-3 mb-4"
            >
              <div class="service-card">
                <div class="service-image-wrapper">
                  <router-link :to="`/rescue-cases/${serviceCase.category}/${serviceCase.id}`">
                    <img 
                      :src="serviceCase.image" 
                      :alt="serviceCase.name"
                      class="img-thumbnail service-image"
                      @error="handleImageError"
                    >
                  </router-link>
                </div>
                <div class="service-info mt-3">
                  <h5 class="service-name text-center">
                    <router-link 
                      :to="`/rescue-cases/${serviceCase.category}/${serviceCase.id}`"
                      class="text-decoration-none"
                      :title="serviceCase.name"
                    >
                      {{ serviceCase.name }}
                    </router-link>
                  </h5>
                  <p class="service-status text-center text-muted small">
                    {{ serviceCase.status }}
                  </p>
                </div>
              </div>
            </div>
          </div>
          
          <div class="text-center mt-4">
            <router-link to="/rescue-cases" class="btn btn-primary btn-lg">
              查看更多救助案例
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'ServiceCases',
  data() {
    return {
      activeCategory: 'all',
      serviceCases: [
        {
          id: 1,
          name: '大宝',
          category: 'cats',
          image: require('@/assets/images/20230423/1682256877856387.jpg'),
          status: '救助中'
        },
        {
          id: 2,
          name: '琪琪',
          category: 'dogs',
          image: require('@/assets/images/20230423/1682256826549167.jpg'),
          status: '待领养'
        },
        {
          id: 3,
          name: '达明',
          category: 'cats',
          image: require('@/assets/images/20230423/1682256770898273.jpg'),
          status: '救助中'
        },
        {
          id: 4,
          name: '路奇',
          category: 'others',
          image: require('@/assets/images/20230423/1682256728449555.jpg'),
          status: '待领养'
        },
        {
          id: 5,
          name: '铁头',
          category: 'cats',
          image: require('@/assets/images/20230423/1682256597498996.jpg'),
          status: '救助中'
        },
        {
          id: 6,
          name: '毛毛',
          category: 'cats',
          image: require('@/assets/images/20230423/1682256552216745.jpg'),
          status: '待领养'
        },
        {
          id: 7,
          name: '马内',
          category: 'dogs',
          image: require('@/assets/images/20230423/1682256531398881.jpg'),
          status: '救助中'
        },
        {
          id: 8,
          name: 'disco',
          category: 'dogs',
          image: require('@/assets/images/20230423/1682256503357127.jpg'),
          status: '待领养'
        }
      ]
    }
  },
  computed: {
    filteredCases() {
      if (this.activeCategory === 'all') {
        return this.serviceCases
      }
      return this.serviceCases.filter(item => item.category === this.activeCategory)
    }
  },
  methods: {
    setActiveCategory(category) {
      this.activeCategory = category
    },
    handleImageError(event) {
      // 如果图片加载失败，显示默认样式
      event.target.style.display = 'none'
      const parent = event.target.parentElement
      if (parent && !parent.querySelector('.service-error-placeholder')) {
        const placeholder = document.createElement('div')
        placeholder.className = 'service-error-placeholder'
        placeholder.style.cssText = 'width:100%;height:200px;background:#04A07B;color:white;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:16px;'
        placeholder.textContent = '🐾 救助动物'
        parent.appendChild(placeholder)
      }
    }
  }
}
</script>

<style scoped>
.service-cases {
  background: #f8f9fa;
}

.center_nav_ul {
  border: none;
}

.center_nav_ul .nav-link {
  background: white;
  border: 2px solid #04A07B;
  border-radius: 20px;
  color: #04A07B;
  font-weight: 600;
  padding: 8px 20px;
  margin: 0 5px;
  transition: all 0.3s ease;
}

.center_nav_ul .nav-link:hover,
.center_nav_ul .nav-link.active {
  background: #04A07B;
  color: white;
  border-color: #04A07B;
  transform: translateY(-2px);
}

.service-card {
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
}

.service-image-wrapper {
  overflow: hidden;
  border-radius: 8px;
}

.service-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: all 0.3s ease;
  border-radius: 8px;
}

.service-image:hover {
  transform: scale(1.05);
}

.service-name a {
  color: #333;
  font-weight: 600;
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

.service-name a:hover {
  color: #04A07B;
}

.service-status {
  font-size: 0.9rem;
  margin-bottom: 0;
}

.btn-primary {
  padding: 12px 30px;
  font-size: 1.1rem;
  border-radius: 25px;
  transition: all 0.3s ease;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(4, 160, 123, 0.3);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .center_nav_ul {
    flex-direction: column;
    align-items: center;
  }
  
  .center_nav_ul .nav-link {
    margin: 2px 0;
    width: 120px;
    text-align: center;
  }
  
  .service-image {
    height: 180px;
  }
  
  .service-name a {
    font-size: 1rem;
  }
  
  .btn-primary {
    padding: 10px 25px;
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .service-cases {
    padding: 3rem 0;
  }
  
  .center_nav_ul .nav-link {
    padding: 6px 15px;
    font-size: 0.9rem;
  }
  
  .service-image {
    height: 150px;
  }
  
  .service-name a {
    font-size: 0.95rem;
  }
  
  .service-status {
    font-size: 0.85rem;
  }
}
</style>
